<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>miterLimit</title>
</head>
<body>
<p>
    miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。

    ——没看懂
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors</a>
</p>

<canvas id="testCanvas"></canvas>

<table>
    <tr>
        <td>
            <canvas id="canvas" width="150" height="150"></canvas>
        </td>
        <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br>
            <form onsubmit="return draw();">
                <label>Miter limit</label>
                <input type="text" size="3" id="miterLimit"/>
                <input type="submit" value="Redraw"/>
            </form>
        </td>
    </tr>
</table>


<script>
    function drawTest() {
        var canvas = document.getElementById("testCanvas");
        var ctx = canvas.getContext("2d");


        ctx.lineWidth = 10;
        for (var i = 0; i < 10; i++) {
            ctx.moveTo(i * 20, 50);
            ctx.lineTo((i + 1) * 20, 100);
            ctx.lineTo((i + 1) * 20, 50);
            ctx.miterLimit = i * 10;
            ctx.stroke();
        }

    }

    function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');

        // Clear canvas
        ctx.clearRect(0, 0, 150, 150);

        // Draw guides
        ctx.strokeStyle = '#09f';
        ctx.lineWidth = 2;
        ctx.strokeRect(-5, 50, 160, 50);

        // Set line styles
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 10;

        // check input
        if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
            ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
        } else {
            alert('Value must be a positive number');
        }

        // Draw lines
        ctx.beginPath();
        ctx.moveTo(0, 100);
        for (i = 0; i < 24; i++) {
            var dy = i % 2 == 0 ? 25 : -25;
            ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
        }
        ctx.stroke();
        return false;
    }

    document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
    drawTest();
    draw();
</script>
</body>
</html>